<template>
  <view class="page-body flex-col">
    <u-sticky h5-nav-height="0">
      <view class="menu">
        <view
          :class="['item', status === item.id ? 'on' : '']"
          v-for="item of menus"
          :key="item.id"
          @click="changeType(item.id)"
          ><view>{{ item.title }}</view></view
        >
      </view>
    </u-sticky>
    <scroll-view
      @scrolltolower="lower"
      scroll-y="true"
      class="page-content flex-h-1"
    >
      <view class="list" v-if="list.length">
        <view class="item" v-for="item of list" :key="item.id">
          <view class="icon">
            <i class="iconfont icon-wallet1"></i>
          </view>

          <view class="con">
            <view class="name">提现到{{ types[item.type] || "-" }}</view>
            <view class="time">提现时间：{{ item.created_at }} </view>
            <view class="time" v-if="item.updated_at"
              >审核时间：{{ item.updated_at }}
            </view>
          </view>

          <view class="rig">
            <view class="price"><span v-if="item.status == 2">+</span><span v-else>-</span>{{ item.price }}</view>
            <view :class="['des', getStatus(item.status)[1]]">{{
              getStatus(item.status)[0]
            }}</view>
          </view>
        </view>
        <u-loadmore :status="loadmoreStatus"></u-loadmore>
      </view>
      <u-empty mode="data" v-else></u-empty>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadmoreStatus: "loadmore",
      types: {
        0: "微信",
        1: "支付宝",
        2: "银行卡",
        3: "余额",
      },
      menus: [
        { title: "全部", id: -1 },
        { title: "待审核", id: 0 },
        { title: "通过", id: 1 },
        { title: "驳回", id: 2 },
      ],

      status: -1,
      list: [],
      pageNo: 1,
      isEnd: false,
    };
  },

  computed: {
    getStatus() {
      return (id) => {
        let status = parseInt(id),
          item = this.menus.find((el) => el.id === status),
          _class = "";

        if ([0, 3].includes(status)) {
          _class = "on";
        }

        return [item.title, _class];
      };
    },
  },
  onLoad() {
    this.getList();
  },
  methods: {
    changeType(status) {
      this.status = status;
      //   this.clearData();
      this.pageNo=1;
      this.getList()
    },
    async getList() {
      const res = await this.$allrequest.distribution.getCashList({
        status: this.status,
        pageNo: this.pageNo,
      });
      if (res.code == 0) {
        this.list = res.data.list;
        this.loadmoreStatus =
          res.data.list.length <= 10 ? "nomore" : "loadmore";
        this.pageNo++;
      }
    },
    async lower() {
      if (this.loadmoreStatus == "nomore") return;
      const res = await this.$allrequest.distribution.getCashList({
        status: this.status,
        pageNo: this.pageNo,
      });
      if (res.code == 0) {
        this.list.push(...res.data.list);
        this.loadmoreStatus =
          res.data.list.length <= 10 ? "nomore" : "loadmore";
        this.pageNo++;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-body {
  min-height: 100vh;
  background: #f2f2f2;
}

.menu {
  display: flex;

  .item {
    position: relative;
    overflow: hidden;
    width: 25%;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 28rpx;
    color: #262626;

    view {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      line-height: 1.2;
    }

    &.on {
      font-weight: bold;

      view:after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 10rpx;
        width: 100%;
        height: 6rpx;
        background: #f0250e;
      }
    }
  }
}

.list {
  margin: 24rpx 0;
  background: #fff;
  //  height: 100%;
  .item {
    position: relative;
    display: flex;
    padding: 24rpx 30rpx;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 124rpx;
      right: 0;
      height: 2rpx;
      background: #f8f8f8;
    }

    &:last-of-type {
      border-bottom: 0;
    }
  }

  .con {
    flex: 1;
    overflow: hidden;
    padding: 0 24rpx;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70rpx;
    height: 70rpx;
    background: #f83c08;
    border-radius: 32px;

    .iconfont {
      color: #fff;
      font-size: 56rpx;
    }
  }

  .name {
    padding: 14rpx 0;
    font-size: 28rpx;
    color: #000;
  }

  .time {
    font-size: 24rpx;
    line-height: 44rpx;
    color: #8c8c8c;
  }

  .rig {
    text-align: right;
    .price {
      padding-top: 10rpx;
      font-size: 36rpx;
      color: #000;
      font-weight: bold;
    }

    .des {
      padding-top: 6rpx;
      font-size: 26rpx;
      color: #8c8c8c;

      &.on {
        color: #f0250e;
      }
    }
  }
}
</style>
